<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2.113&amp;key=ABQIAAAA1QnAxBtPWpvkkIJ1M7uNRhRg8ea_49lyqtDTy_ytR6v-HqmzORRUZuFz8QQsoPvQ-uEZSLs4m1nYsw&sensor=true" type="text/javascript"></script> 
<script src="/gmap/src/prototype.js" type="text/javascript"></script>
<script src="/gmap/src/norightclick.js" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[

var data = [
<?php 
// Output from database to JSON format ###
$str="";
foreach ($location as $row):
$str.= ",{ user: "."'".$row['user_name']."'".", lng: ".$row['loc_lng'].", lat: ".$row['loc_lat'].", loc: "."'".$row['loc_name']."'".", img: "."'".$row['loc_img']."'".", detail: "."'".$row['loc_detail']."'"."}"."\n";
endforeach;
$str=substr($str,1);
echo $str; 
?>
];

var latUrl = "<?=$lat;?>";
var lngUrl = "<?=$lng;?>";		
var map, route;
var points = [];
var gmarkers = [];
var count =0;
var stopClick = false;

function addIcon(icon) 
	{ 
		 icon.shadow = "http://mcmarkers.googlepages.com/iimm1-shadow.png ";
		 icon.iconSize = new GSize(32, 32);
		 icon.shadowSize = new GSize(37, 34);
		 icon.iconAnchor = new GPoint(15, 34);
		 icon.infoWindowAnchor = new GPoint(19, 2);
		 icon.infoShadowAnchor = new GPoint(18, 25);
	}

function addClickevent(marker) 
	{ 
		 GEvent.addListener(marker, "click", function() 
			 {
				 marker.openInfoWindowHtml(marker.content);
				 count = marker.nr;
				 stopClick = true;
			 });
		 return marker;
	}	

function buildMap() 
	{
		if(GBrowserIsCompatible()) 
			{
				function colourWindow() 
					{
						// Change any <imgs> that use iw2.png
						var imgs = document.getElementsByTagName("img")
						for (var n = 0 ; n < imgs.length ; n++ )
						{
						  var a=imgs[n].src;
						  if (a.indexOf("iw2.png") > -1) 
								{
									 imgs[n].src="/gmap/image/rediw.png";
								}
						}  
						// Change any <divs> that use "white"
						var divs = document.getElementsByTagName("div")
						for (var n = 0 ; n < divs.length ; n++ )
						{
							if (divs[n].style.backgroundColor == "white") 
								{
									divs[n].style.backgroundImage="URL(/gmap/image/red.png)";
								}
						 }  
			}

  map = new GMap2($("map"));
  map.setCenter(new GLatLng(latUrl, lngUrl), 11);
  map.addControl(new GMapTypeControl()); 

  // custom icon marker
  var icon = new GIcon();
  icon.image = "/gmap/icon/iimm1-blue.png";
  addIcon(icon);


  for(var i = 0; i < data.length; i++) 
		{
		   points[i] = new GLatLng(data[i].lat, data[i].lng);
		   gmarkers[i] = new GMarker(points[i], icon);

		   // Infowindow
			var html = "<div class='infowindow'><img src=../../uploads/"+ data[i].img +"><br/>" + data[i].detail + "<br/><strong>Post by :</strong>" + data[i].user +"</div>";
		   gmarkers[i].content = html;
		   gmarkers[i].nr = i;
		   addClickevent(gmarkers[i]);
		   map.addOverlay(gmarkers[i]);		   
		   map.getInfoWindow(gmarkers[i]);
		   colourWindow(gmarkers[i]);
		  }

  // Open infowindow of first marker
  gmarkers[0].openInfoWindowHtml( gmarkers[0].content);

  route =setTimeout("anim()", 3600);
 }
} 

function anim() {

 count++;
 if(count < points.length) {

  // Use counter as array index
  map.panTo(points[count]);
  gmarkers[count].openInfoWindowHtml( gmarkers[count].content);
  var delay = 3400;
  if((count+1) != points.length)
   var dist = points[count].distanceFrom(points[count+1]);

  // Adjust delay
  if( dist < 10000 ) {
   delay = 2000;
  }
  if( dist > 80000 ) {
   delay = 4200;
  }
  route = setTimeout("anim()", delay);
 }
  else {

  clearTimeout(route);
  count = 0;
  route = null;
  anim();
 }
}

//]]>
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?=$title;?></title>
<meta name="keywords" content="แผนที่,สร้างแผนที่,หาเพื่อน,หาแฟนคุย,หาแฟน,google map,api,geo,social,ดูดวง,เล่นเกมส์" />
<meta name="description" content="เว็บ application สำหรับสร้างแผนที่ของคุณเอง สามารถมีเพื่อนๆมากมายในละแวกบ้านเข้ามาแจมได้ด้วย!" />
<link href="/gmap/template/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.infowindow { 
	width: 150px;
	height: 140px;
    font-size:12px;
	text-align: left;
	margin:0;
	color:black;

}
#map {
    height: 460px;
	width: 460px;
	border: 1px solid gray;
	margin-top: 8px;
	margin-left: 8px;
	overflow: hidden;
	
}
</style>
</head>
<body onload="buildMap()" onunload="GUnload()">
<!-- header begin -->
<?php include('include/header.php');?>

<!-- menu begin -->
<?php include('include/menu.php');?>

<!-- content begin -->
<div id="content">
	<div id="main">
		<div id="map">
	  </div><br />
  </div>
	<div id="sidebar">
	<?php if($sessID == null) { ?>
		<div id="login" class="boxed">
			<h2 class="title">Login Account</h2>

			<div class="content">
				<?php echo form_open('gmap/v1/verifyUser');?>
					<fieldset>
					<legend>Sign-In</legend>
					<label for="inputtext1">Email:</label>
					<input id="inputtext1" type="text" name="email" value="" />
					<label for="inputtext2">Password:</label>
					<input id="inputtext2" type="password" name="password" value="" />
					<?php if($this->session->flashdata('error')){ echo $this->session->flashdata('error');}?>
					<input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" />
					<p><a href="#">Forgot your password?</a></p>
					</fieldset>
				</form>
			</div>
		</div>
		<?php } else { ?>
		<div id="login" class="boxed">
			<h2 class="title">My Account</h2>

			<div class="content">	
			Hi, <?=$sessuser;?> | <?= anchor('gmap/v1/profile/','[Your profile]');?><br />
			<ul>
			<li><?= anchor('gmap/v1/user/','Dashboard');?></li>
			<li><?= anchor('gmap/v1/upload/','Upload your photos');?></li>
			<li><?= anchor('gmap/v1/getmap/','Create your own map');?></li>
			<li><?= anchor('gmap/v1/setting/','Setting');?></li>
			<li><?= anchor('gmap/v1/logout','Sign out');?></li>
			</ul>
			</div>
		</div>
		<?php } ?>
		<div id="updates" class="boxed">
			<h2 class="title">Recent Updates</h2>
			<div class="content">
								<ul>
					<li>
						<h3>May 1, 2009</h3>
						<p><a href="#">แชร์ภาพถ่ายให้เพื่อนๆของคุณ&#8230;</a></p>
					</li>
					<li>
						<h3>Apil 30, 2009</h3>
						<p><a href="#">ส่งต่อแผนที่ ที่มีภาพถ่ายของคุณ&#8230;</a></p>
					</li>
					<li>
						<h3>Apil 28, 2009</h3>
						<p><a href="#">แลกเปลี่ยนความคิดเห็นต่อภาพถ่ายที่มีของฉัน&#8230;</a></p>
					</li>
				</ul>
			</div>
		</div>
		</div>
	</div>

<!-- footer begin -->
<?php include('include/footer.php'); ?>
</body>
</html>
